import React, { useEffect, useState } from 'react'
import axios from 'axios'

import { Table, Button, Modal,Drawer } from 'antd';

import { PlusOutlined } from '@ant-design/icons';
import {
  Cascader,
  Checkbox,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Slider,
  Switch,
  TreeSelect,
  Upload,
} from 'antd';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const normFile = (e) => {
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};

export default function Perform() {
  //编辑表单
  const [componentDisabled, setComponentDisabled] = useState(true);
  //编辑模块显示
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };

  let [PerformData, setPerformData] = useState([])
  //  添加对话框的显示隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //标题的表头
  const columns = [
    {
      title: '演唱会名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '简介',
      dataIndex: 'self',
      key: 'type',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
          <Button onClick={() => handleEdit(record)}>编辑</Button>
          <Button onClick={() => handleDelete(record)}>删除</Button>
        </span>
      ),
    },
  ];

  //初始化获取演出数据

  useEffect(() => {
    axios.get('http://localhost:3000/show/getproform').then(response => {
      setPerformData(response.data)
    })
      .catch(error => {
        console.log(error);
      });
  }, [])
  let data = PerformData.data

  console.log(PerformData.data, '111');
  const handleEdit = (record) => {
    // 处理编辑操作
    showDrawer()
    console.log(record, 'record');
    // axios.get('')
  };

  const handleDelete = (record) => {
    // 处理删除操作
    console.log(record, 'delrecord');
  };

  //分页


  const pagination = {
    pageSize: 10, // 每页显示的条数
    total: PerformData.length, // 数据总数
    showSizeChanger: true, // 是否可以改变每页显示条数
    showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`, // 自定义显示总条数的文本
  };

  return (
    <div>
      <Table columns={columns} dataSource={data} pagination={pagination} />
      <Button type="primary" onClick={showModal}>
        添加演唱会
      </Button>
      <Modal title="添加演唱会" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>

      </Modal>
      <Drawer title="编辑演唱会" placement="right" onClose={onClose} open={open}>
      <Checkbox
        checked={componentDisabled}
        onChange={(e) => setComponentDisabled(e.target.checked)}
      >
        Form disabled
      </Checkbox>
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        layout="horizontal"
        disabled={componentDisabled}
        style={{
          maxWidth: 600,
        }}
      > 
        <Form.Item label="演唱会">
          <Input />
        </Form.Item>

  
        <Form.Item label="价格">
          <InputNumber />
        </Form.Item>
        <Form.Item label="简介">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>
          <Upload action="/upload.do" listType="picture-card">
            <div>
              <PlusOutlined />
              <div
                style={{
                  marginTop: 8,
                }}
              >
                Upload
              </div>
            </div>
          </Upload>
        </Form.Item>
        <Form.Item>
          <Button>取消</Button>
          <Button type='primary'>添加</Button>
        </Form.Item>
      </Form>
      </Drawer>
    </div>
  )
}
